<template>
	<view class="dity">
		<!-- 商品展示 -->
			<view class="dity-item":key='index'
			v-for="(item,index) in dityList">
				<!-- 商品展示 -->
				<image @click="goodDetail(item.id)" class="dity-img" :src="item.cover"></image>
				<!-- 商品介绍 -->
				<view class="dity-content">
					<!-- 商品名称 -->
					<text class="dity-caption">{{item.name}}</text>
					<!-- 商品价格 -->
					<view>
						<text class="pprice">￥{{item.price}}</text>
						<text class="oprice">￥{{item.price}}</text>
					</view>
					<text class="discount">{{item.discount > 0  ? item.discount :  0 }}折</text>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			dityList:Array
		},
		methods:{
			goodDetail(id){
				uni.navigateTo({
					url:'/pages/goodDetail/goodDetail?id='+id
				})
			}
		}
	}
</script>

<style>
.dity{
	display: flex;
	flex-wrap: wrap;
}
.dity-item{
	padding-left: 5%;
	width: 43%;
	padding-bottom: 20rpx;
}
.dity-img{
	width: 100%;
	height: 375rpx;
}
.dity-content{
	text-align: center;
}
.dity-caption{
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-all;
	padding: 6rpx 20rpx;
}
.oprice{
	color: #d4acba;
	text-decoration: line-through;
	font-size: 24rpx;
}
.discount{
	border-radius: 4rpx;
	padding: 2rpx 10rpx;
	font-size: 20rpx;
	color: #c02c38;
	font-size: 24rpx;
}
</style>